<!--面包屑组件-->
<template>
  <a-breadcrumb>
    <!-- <transition-group name="breadcrumb"> -->
    <template v-for="(item, index) in levelList">
      <a-breadcrumb-item :key="index" v-if="item.name != name && index != 1">
        <router-link
          :to="{ path: item.path === '' ? '/' : item.path }"
        >{{ item.meta.title }}</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item :key="index" v-else>{{ item.meta.title }}</a-breadcrumb-item>
    </template>
    <!-- </transition-group> -->
  </a-breadcrumb>
</template>

<script>
export default {
  name: '',
  components: {
  },
  data () {
    return {
      name: '',
      levelList: null
    }
  },
  watch: {
    $route (route) {
      this.getBreadcrumb()
    }
  },
  created () {
    this.getBreadcrumb()
  },
  mounted () {},
  methods: {
    getBreadcrumb () {
      this.name = this.$route.name
      const matched = this.$route.matched.filter(item => item.meta && item.meta.title)
      if (this.name === 'HomePage') {
        this.levelList = [{ path: '/home', name: 'HomePage', meta: { title: '首页', icon: 'icon-bangzhu', iconColor: '#409EFF' } }]
      } else {
        this.levelList = [{ path: '/home', name: 'HomePage', meta: { title: '首页', icon: 'icon-bangzhu', iconColor: '#409EFF' } }].concat(matched)
      }
    }
  }
}
</script>

<style lang="less" scoped>
/* breadcrumb transition */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all .5s;
}

.breadcrumb-enter,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(20px);
}

.breadcrumb-move {
  transition: all .5s;
}

.breadcrumb-leave-active {
  position: absolute;
}
</style>
